<template>
  <div>
    <div class="searchbox">
      <label for="user" class="users">
        用户名: <input type="text" id='user' clearable v-model="search">
      </label>
      <label for="people" class="peoplenum">
        警员编号: <input type="text" id="people" clearable>
      </label>
      <button class="searchBtn" @click="searchfun">搜索</button>

    </div>
    <div class="add">
      <button class="addAll" @click="onpendialogfun">新增</button>
      <el-button type="primary" @click="deleteSomefun" class="deleteAll">批量删除</el-button>

    </div>
  </div>

</template>

<script>
import eventBus from '../utils/eventBus'
export default {

  // props: ["keyword"],
  data() {
    return {
      // input: "",
      search: ''
    };
  },

  mounted() { },

  methods: {
    // 批量删除
    deleteSomefun() {
      eventBus.$emit("batchDetele")
      // console.log(1111111111111111111);
    },
    // 查询
    searchfun() {
      this.$emit('searchfunparent', this.search)
    },
    onpendialogfun() {
      this.$emit('parentopen')
    }
  },
};
</script>

<style lang="less" scoped>
.searchbox {
  height: 100px;
  width: 100%;
  background-color: #fff;
  box-shadow: 1px 3px rgba(182, 189, 202, 0.5);
  border-radius: 8px;
  display: flex;
  //   justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: relative;

  .searchBtn {
    width: 100px;
    height: 30px;
    box-shadow: 0px 2px rgba(153, 151, 151, 0.603);
    background-color: #6669ff;
    font-size: 16px;
    color: #fff;
    border-color: #409EFF;
    line-height: 30px;
    // margin-left: 710px;
    border-radius: 4px;
    position: absolute;
    right: 200px;
    cursor: pointer;
  }

  .searchBtn:hover {
    background-color: #409EFF;
  }

  .users {
    margin: 0 84px 0 54px;
  }
}

.add {
  height: 60px;
  background-color: #fff;
  box-shadow: 1px 3px rgba(182, 189, 202, 0.5);
  border-radius: 8px;
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;

  button {
    width: 100px;
    height: 30px;
    box-shadow: 0px 2px rgba(153, 151, 151, 0.603);
    background-color: #6669ff;
    border-color: #409EFF;
    border-radius: 5px;
    font-size: 16px;
    position: absolute;
    right: 55px;
    top: 15px;
    color: #fff;
    cursor: pointer;
  }

  .deleteAll {
    box-shadow: 0px 2px rgba(153, 151, 151, 0.603);
    // background-color: #6669ff;
    position: absolute;
    right: 250px;
    top: 15px;
  }

  button:hover {
    background-color: #409EFF;
  }
}
</style>